<template>
  <el-container class="app">
    <el-aside width="auto">
      <!-- <div class="logo"></div> -->
      <router-link to="" class="logo" />

      <el-scrollbar class="myscrollbar" style="height: calc(100vh - 54px)">
        <el-menu
          :default-active="defaultActive"
          background-color="transparent"
          text-color="#fff"
          class="navmenu"
          :collapse="isCollapse"
          unique-opened
          router
          @select="handelSelect"
        >
          <!-- <treemenu :data="menus"/> -->

          <el-submenu index="/project">
            <template slot="title">
              <i class="el-icon-document" />
              <span>项目管理</span>
            </template>

            <el-menu-item index="/app/project">项目列表</el-menu-item>
          </el-submenu>

          <!-- <el-submenu index="/purchasing">
            <template slot="title">
              <i class="el-icon-s-finance" />
              <span>订单管理</span>
            </template>

            <el-menu-item index="/app/purchasing">图形申购</el-menu-item>
            <el-menu-item index="/app/remittance">汇款凭证</el-menu-item>
          </el-submenu>

          <el-submenu index="/order">
            <template slot="title">
              <i class="el-icon-s-order" />
              <span>单据查询</span>
            </template>

            <el-menu-item index="/app/order">订单查询</el-menu-item>
            <el-menu-item index="/app/orderdetailed">订单明细</el-menu-item>
          </el-submenu>

          <el-submenu index="/balance">
            <template slot="title">
              <i class="el-icon-s-data" />
              <span>统计报表</span>
            </template>

            <el-menu-item index="/app/balance">账户结余</el-menu-item>
            <el-menu-item index="/app/reconciliation">对账单</el-menu-item>
            <el-menu-item index="/app/support">总部扶持</el-menu-item>
          </el-submenu> -->
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header>
        <el-button
          icon="el-icon-s-fold"
          class="toggle-btn"
          @click="isCollapse = !isCollapse"
        />
        <!-- <el-input
          placeholder="请搜索"
          prefix-icon="el-icon-search"
          v-model="keyword"
          class="search-input"
        /> -->

        <div class="right-nav">
          <router-link to=""><i class="el-icon-house" /></router-link>
          <el-badge value="">
            <i class="el-icon-bell" />
          </el-badge>

          <el-dropdown trigger="click" @command="handleCommand">
            <div class="avatar">
              <!-- <el-avatar :size="30" src="../assets/images/aijiale-logo.png" /> -->
              <img src="../assets/images/aijiale-logo.png" />
              <span class="nickname">
                <el-link>{{ userInfo.xm }} {{ userInfo.agent }}</el-link>
                <el-link type="primary">{{userInfo.bm=='3D设计部'?"设计师账号":userInfo.dwdm}}</el-link>
              </span>
            </div>
            <el-dropdown-menu class="avatar-options" slot="dropdown">
              <!-- <el-dropdown-item command="/setting" icon="el-icon-setting"
                >个人设置</el-dropdown-item
              > -->
              <el-dropdown-item command="/editpass" icon="el-icon-lock">
                修改密码
              </el-dropdown-item>
              <el-dropdown-item
                divided
                command="/logout"
                icon="el-icon-switch-button"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <router-view />
      </el-main>
      <el-dialog
        title="修改密码"
        :visible.sync="dialogVisible"
        width="400px"
        :close-on-click-modal="false"
      >
        <el-form
          :model="resetForm"
          :rules="resetFormRules"
          ref="resetForm"
          status-icon
          label-width="100px"
        >
          <el-form-item label="旧密码：" prop="password">
            <el-input
              type="password"
              v-model.trim="resetForm.password"
              auto-complete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码：" prop="newpwd">
            <el-input
              type="password"
              v-model.trim="resetForm.newpwd"
              auto-complete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码：" prop="newpassword1">
            <el-input
              type="password"
              v-model.trim="resetForm.newpassword1"
              auto-complete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click.native.prevent="toAmend"
              >确认修改</el-button
            >
            <el-button @click="dialogVisible = false">取 消</el-button>
          </el-form-item>
        </el-form>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确定修改</el-button>
        </span> -->
      </el-dialog>

      <el-footer>后台系统 ©2021 Created by 艾家乐设计管理平台</el-footer>
    </el-container>
  </el-container>
</template>
<script>
// import Treemenu from "../components/Treemenu.vue";
import { mapState } from "vuex";
export default {
  // components: { Treemenu },
  data() {
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else if (value.toString().length < 8 || value.toString().length > 16) {
        callback(new Error("密码长度为8-16位"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetForm.newpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      keyword: "",
      isCollapse: false,
      userInfo: {},
      dialogVisible: false,
      resetForm: {
        //传给后台所需要的参数
        newpassword1: "",
        password: "",
        username: "", //此处只是后台需要的字段而已，如果前期有公用cookie里面有获取并且保存过，现在需要另外调用进来，具体的获取方法就看个人了
      },
      resetFormRules: {
        password: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newpwd: [{ required: true, validator: validatePass, trigger: "blur" }],
        newpassword1: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    //读取权限菜单
    // this.$store.dispatch("GetRoleInfo");
    let user = {};
    if (localStorage.getItem("userInfo")) {
      user = localStorage.getItem("userInfo");
      console.log((this.userInfo = JSON.parse(user)));
    }
    if(localStorage.getItem("bm")){
      this.userInfo.bm = localStorage.getItem("bm");
    }
  },
  computed: {
    defaultActive() {
      return localStorage.getItem("default-active") || "/app/project";
    },
    ...mapState({
      menus: (state) => state.roleInfo.content,
    }),
  },
  methods: {
    handleCommand(command) {
      if (command === "/logout") {
        this.$confirm("您确定要退出当前登录吗？", "提示")
          .then(() => {
            localStorage.removeItem("userInfo");
            this.$message.success("退出登录成功！");
            this.$router.replace("/login");
          })
          .catch(() => {});
      }
      if (command === "/editpass") {
        // this.dialogVisible = true;
      }
    },
    toAmend() {
      this.$refs.resetForm.validate((valid) => {
        if (valid) {
          this.$http
            .post(`/api3/mob/work?proname=INB011`, {
              ...this.resetForm,
            })
            .then((res) => {
              if (res.code === 2) {
                this.$message({
                  message: res.msg,
                  type: "error",
                  duration: "2000",
                });
                return false;
              }
              if (res.code === 0) {
                this.$message.success("修改成功,3秒后跳转到登录页！");
                this.dialogVisible = false;
                setTimeout(() => {
                  this.logout(); //调用跳转到登陆页的方法
                }, 3000);
              }
              ic;
            })
            .catch(() => {});
        }
      });
    },
    //这是修改成功后重新返回登陆页的方法，看个人需要自行调整
    async logout() {
      this.$router.push("/login");
    },
    handelSelect(index) {
      localStorage.setItem("default-active", index);
    },
  },
};
</script>

<style lang="less">
.myscrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scrollbar__thumb {
  background-color: rgba(0, 0, 0, 0.15) !important;
}

.el-menu--popup {
  background-color: white !important;
  .el-submenu__title,
  .el-menu-item {
    color: #606266 !important;
  }
}

.app {
  height: 100vh;
  .el-aside {
    background-color: #001529;
    z-index: 10;
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.2);
    .logo {
      display: block;
      height: 35px;
      margin: 10px 25px;
      color: #ffffff;
      background: url(../assets/images/fashilonglogo.png) no-repeat 50% 50% /
        auto 100%;
      background-size: 100% 100%;
    }
    .navmenu {
      border-right: none;
      &:not(.el-menu--collapse) {
        width: 228px;
      }
      [class*="el-icon-"] {
        color: rgba(255, 255, 255, 0.75);
      }
      .el-submenu__title:hover,
      .el-menu-item:hover {
        background-color: rgba(255, 255, 255, 0.5) !important;
      }
      .el-menu-item.is-active {
        color: rgb(255, 255, 255);
        background-color: #1890ff !important;
      }
    }
  }
  .el-header {
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 9;
    .toggle-btn {
      padding: 8px 10px;
      font-size: 18px;
    }
    .search-input {
      margin-left: 10px;
      width: 200px;
      .el-input__inner {
        height: 37px;
        line-height: 37px;
      }
    }
    .right-nav {
      display: flex;
      flex-grow: 1;
      justify-content: flex-end;
      align-items: center;
      [class*="el-icon-"] {
        font-size: 18px;
        margin-left: 20px;
      }
      .avatar {
        display: flex;
        align-items: center;
        margin-left: 30px;
        cursor: pointer;
        .nickname {
          margin-left: 10px;
          white-space: nowrap;
        }
        img {
          border-radius: 50%;
          width: 30px;
          height: 30px;
        }
      }
    }
  }
  .el-main {
    background-color: #f0f0f0;
  }
  .el-footer {
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    line-height: 60px;
    background-color: #f0f0f0;
    text-align: center;
  }
}

.avatar-options {
  min-width: 140px;
}
</style>
